iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
2
Modern Web

在網頁上面畫個地圖 - 使用Openlayers系列 第 1

Day-01 首先,利用 Openlayers.js 產生一張地圖

  • 分享至 

  • xImage
  •  

前言

目前 WebGIS 應用較廣為人知的,應該就當屬 Google Maps Platform。另外還有 OpenLayersLeaflet 這兩套 Open Source 的 Javascript Library 。因為工作上使用的是 OpenLayers 。所以接下來的 30 天將搭配官方案例來解說 OpenLayers 的相關實作。

Day-01 首先,利用 Openlayers.js 產生一張地圖

打開 Visual Studio Code,建立一個 Html,然後將底下的 Code 複製貼上

<!doctype html>
<html lang="zh-tw">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 800px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
    <title>Day-01</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([120.6718112, 24.1502971]),
          zoom: 16
        })
      });
    </script>
  </body>
</html>

利用 Chrome 開啟後,你應該就會得到底下的地圖。
地圖

了解到底發生了什麼事

首先,將地圖加入到網頁上,你必須要做三件事:

  1. 引用 OpenLayers 的 Javascript library
  2. 定義一個 div 來當地圖容器
  3. 透過 Javascript 指令來建立一個簡單的地圖

引用 OpenLayers 的 Javascript library

<!-- OpenLayers 的 CSS,本案例為為非必要載入 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css" type="text/css">

<!-- OpenLayers Library -->
 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>

注意 如果你的地圖應用的客戶端是比較舊的平台,例如:IE 或者是 Android 4.x,需要另外引用底下的 Lib

 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>

定義一個 div 來當地圖容器

很單純的直接在頁面上放置一個 div 當地圖容器,因為是 Html Tag所以之後需要設定地圖大小,可以透過 CSS 來針對這個元素來控制寬高。

<style>
    .map {
    height: 800px;
    width: 100%;
    }
</style>

<div id="map" class="map"></div>

透過 Javascript 指令來建立一個簡單的地圖

接著就是今天的核心,利用 js 來將地圖建立出來。請看底下這段程式碼:

// 宣告一個 Map 物件
var map = new ol.Map({  
        // 將 Map 物件目標指向 div,這邊要注意的是其值是 div 的 id 屬性。
        target: 'map',  
        // 這裡是宣告圖層陣列,範例加入的是 OSM 圖磚圖層。
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        // 這裡是初始化地圖視圖的地方。定義初始中心位置及視圖層級
        view: new ol.View({
          center: ol.proj.fromLonLat([120.6718112, 24.1502971]),
          zoom: 16
        })
      });

以上,是今天的分享。接下來會詳細講解 ViewLayers

Referense


下一篇
Day-02 View 講解
系列文
在網頁上面畫個地圖 - 使用Openlayers5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
john_old_man
iT邦新手 5 級 ‧ 2019-09-10 06:32:15

雖然您棄賽了,但大大這5天的教學令人受益無窮,
期待大大的其他教學文

我要留言

立即登入留言